import React from 'react';
import { View, Text } from '@tarojs/components';

interface userGenderProps {
    gender: string;
}

/**
 * 用户性别展示组件
 * @param {userGenderProps} props - 组件属性
 * @returns {JSX.Element} 渲染的性别图标组件
 */
export const UserGenderImage: React.FC<userGenderProps> = ({ 
    gender
}) => {
    if (!gender) {
        return <></>;
    }
    
    if (gender === '男') {
        // 获取男性渐变颜色
        return (
            <View className="w-8 h-8 flex items-center justify-center font-bold">
                <Text 
                    className="text-base"
                    style={{
                        background: 'transparent',
                        WebkitBackgroundClip: 'text',
                        backgroundClip: 'text',
                        color: '#4ecdc4',
                        fontWeight: 700,
                        textShadow: '0 0 2px rgba(0,0,0,0.1)'
                    }}
                >
                    ♂
                </Text>
            </View>
        );
    } else if (gender === '女') {
        // 获取女性渐变颜色
        return (
            <View className="w-8 h-8 flex items-center justify-center font-bold">
                <Text 
                    className="text-base"
                    style={{
                        background: 'transparent',
                        WebkitBackgroundClip: 'text',
                        backgroundClip: 'text',
                        color: '#ff6b6b',
                        fontWeight: 700,
                        textShadow: '0 0 2px rgba(0,0,0,0.1)'
                    }}
                >
                    ♀
                </Text>
            </View>
        );
    } else {
        return <></>;
    }
};

export default UserGenderImage;